<template><!--学习足迹-->
    <div style="height:100%;">
        <navbar ref="orderFullScreen02"></navbar>
        <navbar :title="$t('personal_learning_history')" ref="orderFullScreen" style="opacity: 0;"></navbar>
        <!--内容 start-->
        <div class="content-noBottom" style="padding:0;">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <div class="banner-box-01" v-if="(historyInfo == true) && historyData && historyData.is_signup_date">
                    <div class="banner-box-img"></div>
                    <p class="font-size20 colorfff" style="padding: 65px 0 7px 15px;">{{ timeSplit(historyData.is_signup_date) }}</p>
                    <p class="font-size11 colorfff paddingLR15">{{ $t('learning_history_register', {'value': TimeSubstring(historyData.is_signup_date)}) }}</p><!--在{{ TimeSubstring(historyData.is_signup_date) }}加入了我们这个平台-->
                    <p class="font-size10 colorfff paddingLR15" style="text-align: right;padding-top: 28px;" v-if="historyData.ls_update_time">{{ $t('last_update_time') }}：{{ historyData.ls_update_time | substringTime }}</p><!--上次更新时间-->
                </div>
                <div class="banner-box-01" v-if="(historyInfo == false) || !historyData">
                    <div class="banner-box-img"></div>
                </div>
                <div class="white-bg module-box-28">
                    <ul>
                        <li class="li">
                            <div class="padding-box clearfix">
                                <span class="icon-box-03"><i class="learn-icon"></i></span>
                                <div>
                                    <p class="title">{{ $t('learning_history_my_studies') }}</p><!--我的学习-->
                                    <div class="module-content-box" v-if="(historyInfo == true) && historyData && historyData.ls_total_courses !== 0">
                                        <ul>
                                            <li class="li-li clearfix">
                                                <i class="line-left cur"></i>
                                                <i class="circle-icon-01"></i>
                                                <p class="con-box" v-if="historyData.is_first_course_date"><span class="font-size12" v-if="historyData.is_first_course_date">{{ timeSplit(historyData.is_first_course_date) }}</span><em class="point"></em><span class="font-size14">{{ $t('learning_history_learn_first_course') }}</span></p><!--学习了第一门课程-->
                                            </li>
                                            <li class="li-li cur clearfix">
                                                <i class="circle-icon-01 cur clearfix"><em></em></i>
                                                <p>{{ $t('learning_history_now_1') }} <span class="color518">{{ historyData.ls_total_courses }}</span> {{ $t('learning_history_now_2') }}</p><!--至今共学习/门课程-->
                                            </li>
                                        </ul>
                                    </div>
                                    <p class="no-take-part" v-if="(historyInfo == false) || !historyData || historyData.ls_total_courses == 0">{{ $t('learning_history_learn_none') }}</p><!--您还没有参与过课程的学习！-->
                                    <p class="btn-box"><router-link tag="span" :to="`/LearnIndex/myCourses/${this.encId}`" class="word-btn-02">{{ $t('learning_history_go_my_course') }}</router-link></p><!--前往我的课程-->
                                </div>
                            </div>
                        </li>
                        <li class="li">
                            <div class="padding-box clearfix" style="padding-bottom: 28px">
                                <span class="icon-box-03"><i class="popularity-icon"></i></span>
                                <div>search
                                    <p class="title">{{ $t('learning_history_my_popularity') }}</p><!--我的人气-->
                                    <div class="module-content-box" v-if="(historyInfo == true) && historyData && historyData.ls_praised_num !== 0 && (historyData.ls_praised_num >= historyData.ls_fans_num)">
                                        <ul>
                                            <li class="li-li clearfix" v-if="historyData.is_first_praised_date">
                                                <i class="line-left" :class="{'cur' : !historyData.is_first_fans_date}"></i>
                                                <i class="circle-icon-01"></i>
                                                <p class="con-box"><span class="font-size12" v-if="historyData.is_first_praised_date">{{ timeSplit(historyData.is_first_praised_date) }}</span><em class="point"></em><span class="font-size14">{{ $t('learning_history_first_like') }}</span></p><!--收到了第一个赞-->
                                            </li>
                                            <li class="li-li cur clearfix" v-if="historyData.is_first_fans_date">
                                                <i class="line-left cur"></i>
                                                <i class="circle-icon-01"></i>
                                                <p class="con-box"><span class="font-size12" v-if="historyData.is_first_fans_date">{{ timeSplit(historyData.is_first_fans_date) }}</span><em class="point"></em><span class="font-size14">{{ $t('learning_history_first_fance') }}</span></p><!--拥有了第一个粉丝-->
                                            </li>
                                            <li class="li-li cur clearfix">
                                                <i class="circle-icon-01 cur clearfix"><em></em></i>
                                                <p>{{ $t('learning_history_like_count_pref') }} <span class="color518">{{ historyData.ls_praised_num }}</span> {{ $t('learning_history_like_count_unit') }}，{{ $t('learning_history_have_fance_pref') }} <span class="color518">{{ historyData.ls_fans_num }}</span> {{ $t('learning_history_fance') }}</p><!--至今共收到/个赞/拥有/个粉丝-->
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="module-content-box" v-if="(historyInfo == true) && historyData && historyData.ls_fans_num !== 0 && (historyData.ls_fans_num > historyData.ls_praised_num)">
                                        <ul>
                                            <li class="li-li cur clearfix" v-if="historyData.is_first_fans_date">
                                                <i class="line-left" :class="{'cur' : !historyData.is_first_praised_date}"></i>
                                                <i class="circle-icon-01"></i>
                                                <p class="con-box"><span class="font-size12" v-if="historyData.is_first_fans_date">{{ timeSplit(historyData.is_first_fans_date) }}</span><em class="point"></em><span class="font-size14">{{ $t('learning_history_first_fance') }}</span></p><!--拥有了第一个粉丝-->
                                            </li>
                                            <li class="li-li clearfix" v-if="historyData.is_first_praised_date">
                                                <i class="line-left cur"></i>
                                                <i class="circle-icon-01"></i>
                                                <p class="con-box"><span class="font-size12" v-if="historyData.is_first_praised_date">{{ timeSplit(historyData.is_first_praised_date) }}</span><em class="point"></em><span class="font-size14">{{ $t('learning_history_first_like') }}</span></p><!--收到了第一个赞-->
                                            </li>
                                            <li class="li-li cur clearfix">
                                                <i class="circle-icon-01 cur clearfix"><em></em></i>
                                                <p>{{ $t('learning_history_fance_count_pref') }} <span class="color518">{{ historyData.ls_fans_num }}</span> {{ $t('learning_history_fance') }}，{{ $t('learning_history_have_like_pref') }} <span class="color518">{{ historyData.ls_praised_num }}</span> {{ $t('learning_history_like_count_unit') }}</p><!--至今共拥有/个粉丝/收到/个赞-->
                                            </li>
                                        </ul>
                                    </div>
                                    <p class="no-take-part" v-if="(historyInfo == false) || !historyData || (historyData.ls_fans_num == 0 && historyData.ls_praised_num == 0)">{{ $t('learning_history_fance_none') }}</p><!--您还没有收到赞和粉丝！-->
                                </div>
                            </div>
                        </li>
                        <li class="li">
                            <div class="padding-box clearfix">
                                <span class="icon-box-03"><i class="interactive-icon"></i></span>
                                <div>
                                    <p class="title">{{ $t('learning_history_my_interaction') }}</p><!--我的互动-->
                                    <div class="module-content-box" v-if="(historyInfo == true) && historyData && historyData.ls_question_num !== 0 && historyData.ls_answer_num !== 0">
                                        <ul>
                                            <li class="li-li clearfix" v-if="historyData.is_first_que_date">
                                                <i class="line-left"></i>
                                                <i class="circle-icon-01"></i>
                                                <p class="con-box"><span class="font-size12" v-if="historyData.is_first_que_date">{{ timeSplit(historyData.is_first_que_date) }}</span><em class="point"></em><span class="font-size14">{{ $t('learning_history_first_question') }}</span></p><!--发布了第一个问题-->
                                            </li>
                                            <li class="li-li cur clearfix">
                                                <i class="line-left cur"></i>
                                                <i class="circle-icon-01"></i>
                                                <p class="con-box"><span class="font-size12" v-if="historyData.is_first_praised_date">{{ timeSplit(historyData.is_first_praised_date) }}</span><em class="point"></em><span class="font-size14">{{ $t('learning_history_first_help') }}</span></p><!--获得了第一个帮助-->
                                            </li>
                                            <li class="li-li cur clearfix">
                                                <i class="circle-icon-01 cur clearfix"><em></em></i>
                                                <p>{{ $t('learning_history_ask_count') }} <span class="color518">{{ historyData.ls_question_num }}</span> {{ $t('learning_history_question_unit') }}，{{ $t('learning_history_reply') }} <span class="color518">{{ historyData.ls_answer_num }}</span> {{ $t('learning_history_question_unit') }}</p><!--至今共提问/次/回复/次-->
                                            </li>
                                        </ul>
                                    </div>
                                    <p class="no-take-part" v-if="(historyInfo == false) || !historyData || (historyData.ls_question_num == 0 && historyData.ls_answer_num == 0)">{{ $t('learning_history_ask_none') }}</p><!--您还没有参与在线问答！-->
                                    <p class="btn-box"><router-link tag="span" to="/know/knowList" class="word-btn-02">{{ $t('learning_history_ask_go') }}</router-link></p><!--前往在线问答-->
                                </div>
                            </div>
                        </li>
                        <li class="li">
                            <div class="padding-box clearfix">
                                <span class="icon-box-03"><i class="share-icon"></i></span>
                                <div>
                                    <p class="title">{{ $t('knowledge_share') }}</p><!--我的分享-->
                                    <div class="module-content-box" v-if="(historyInfo == true) && historyData && historyData.ls_share_count !== 0">
                                        <ul>
                                            <li class="li-li cur clearfix">
                                                <i class="line-left cur"></i>
                                                <i class="circle-icon-01"></i>
                                                <p class="con-box"><span class="font-size12" v-if="historyData.is_first_share_date">{{ timeSplit(historyData.is_first_share_date) }}</span><em class="point"></em><span class="font-size14">{{ $t('learning_history_first_knowledge') }}</span></p><!--分享了第一个知识-->
                                            </li>
                                            <li class="li-li cur clearfix">
                                                <i class="circle-icon-01 cur clearfix"><em></em></i>
                                                <p>{{ $t('learning_history_knowledge_count') }} <span class="color518">{{ historyData.ls_share_count }}</span> {{ $t('learning_history_knowledge_count_unit') }}</p><!--至今共分享/个知识-->
                                            </li>
                                        </ul>
                                    </div>
                                    <p class="no-take-part" v-if="(historyInfo == false) || !historyData || historyData.ls_share_count == 0">{{ $t('learning_history_knowledge_none') }}</p><!--您还没有分享过知识！-->
                                    <p class="btn-box"><router-link tag="span" to="/knowledge/knowledgeList" class="word-btn-02">{{ $t('learning_history_knowledge_go') }}</router-link></p><!--前往知识中心-->
                                </div>
                            </div>
                        </li>
                        <li class="li">
                            <div class="padding-box clearfix">
                                <span class="icon-box-03"><i class="point-icon"></i></span>
                                <div>
                                    <p class="title">{{ $t('learning_history_my_credit') }}</p><!--我的积分-->
                                    <div class="module-content-box" v-if="(historyInfo == true) && historyData && historyData.ls_total_integral !== 0">
                                        <ul>
                                            <li class="li-li cur clearfix">
                                                <i class="line-left cur"></i>
                                                <i class="circle-icon-01"></i>
                                                <p class="con-box"><span class="font-size12" v-if="historyData.ls_first_integral_date">{{ timeSplit(historyData.ls_first_integral_date) }}</span><em class="point"></em><span class="font-size14">{{ $t('learning_history_first_credit') }}</span></p><!--获得了第一次积分-->
                                            </li>
                                            <li class="li-li cur clearfix">
                                                <i class="circle-icon-01 cur clearfix"><em></em></i>
                                                <p>{{ $t('learning_history_credit_count') }} <span class="color518">{{ historyData.ls_total_integral }}</span>，{{ $t('learning_history_credit_prefix_before') }} <span class="color518">{{ historyData.rank }}</span> {{ $t('learning_history_credit_num') }}</p>
                                            </li><!--目前总积分/在排行榜里列/位-->
                                        </ul>
                                    </div>
                                    <p class="no-take-part" v-if="(historyInfo == false) || !historyData || historyData.ls_total_integral == 0">{{ $t('learning_history_credit_none') }}</p><!--您还没有获取到积分！-->
                                    <p class="btn-box"><router-link tag="span" :to="'/pointsLeaderboard/' + encId" class="word-btn-02">{{ $t('learning_history_credit_go') }}</router-link></p><!--前往积分排行榜-->
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script>
export default {
    name: 'LearningHistory',
    data() {
        return {
            historyInfo: true,
            historyData: {},
            encId: '', //获取用户id
            isRefresh: false
        };
    },
    methods: {
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.historyData = {};
                this.getHistoryData();
                this.isRefresh = false;
            }, 900);
        },
        onScroll(position) {
            if (position > 10) {
                this.$refs.orderFullScreen02.$el.style.opacity = '0';
            } else {
                this.$refs.orderFullScreen02.$el.style.opacity = '1';
            }
            this.$refs.orderFullScreen.$el.style.opacity = position / 100;
        },
        getHistoryData() {
            this.$axios({
                method: 'POST',
                url: '/app/personal/learningHistory/json'
            }).then(res => {
                let learningHistoryJson = res.data.learningHistoryJson;
                if (learningHistoryJson) {
                    this.historyInfo = true;
                    this.historyData = learningHistoryJson;
                } else {
                    this.historyInfo = false;
                }
            });
        },
        TimeSubstring(time) {
            this.newTime = time.split(' ')[1];
            this.newTimeAng = this.newTime.substring(0, this.newTime.indexOf(':', this.newTime.indexOf(':') + 1));
            return this.newTimeAng;
        },
        timeSplit(time) {
            time = time.split(' ')[0];
            return time;
        },
        //时间比较
        TimeComparison(firstTime, secondTime) {
            var conversionFirstTime = new Date(firstTime);
            var conversionSecondTime = new Date(secondTime);
            if (conversionFirstTime < conversionSecondTime) {
                this.comparisonRusult = 'true';
                return this.comparisonRusult;
            } else {
                this.comparisonRusult = 'false';
                return this.comparisonRusult;
            }
        }
    },
    mounted() {
        this.getHistoryData();
        this.encId = this.$route.params.encId;
    }
};
</script>

<style scoped lang="less">
    .banner-box-01 {
        background: #4267b2;
        height:168px;
        position: relative;
    }
    .banner-box-img {
        width: 160px;
        height: 175px;
        background: url(./images/banner02.png) no-repeat;
        background-size: 100%;
        position: absolute;
        right: 0;
        top: 0;
    }
    .module-box-28 {
        padding: 10px 0 0;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        margin-top: -10px;
        position: relative;
        z-index: 1;
        ul {
            .li {
                border-bottom: 1px solid #e6e6e6;
                .padding-box {
                    padding: 28px 15px 13px 74px;
                    .icon-box-03 {
                        width: 40px;
                        height: 40px;
                        background: #fafafa;
                        border-radius: 50%;
                        float: left;
                        margin-left: -59px;
                    }
                    .title {
                        font-weight: bold;
                        font-size: 16px;
                        padding: 4px 0 0 0;
                    }
                    .no-take-part {
                        font-size: 12px;
                        color: #cccccc;
                        padding: 14px 0 0 0;
                    }
                    .btn-box {
                        padding: 5px 0 0 0;
                        .word-btn-02 {
                            padding-left: 0;
                            display: inline-block;
                        }
                    }
                    .module-content-box {
                        ul {
                            padding: 14px 0 0 20px;
                            .li-li {
                                &.cur {
                                    margin-top: -4px;
                                }
                                .circle-icon-01 {
                                    width: 10px;
                                    height: 15px;
                                    float: left;
                                    margin: 0 0 0 -20px;
                                    &:before{
                                        content:"";
                                        display: inline-block;
                                        width: 9px;
                                        height: 9px;
                                        background: #ffffff;
                                        border: 1px solid #cccccc;
                                        border-radius: 50%;
                                        margin-bottom: -4px;
                                    }
                                    &.cur {
                                        &:before {
                                            width: 11px;
                                            height: 11px;
                                            background: rgba(81,134,240,0.2);
                                            border: none;
                                        }
                                        em {
                                            width: 5px;
                                            height: 5px;
                                            background: #075ebb;
                                            border-radius: 50%;
                                            float: left;
                                            margin: -7px 0 0 3px;
                                        }
                                    }
                                }
                            }
                            .con-box {
                                float: left;
                                color: #999999;
                            }
                            .line-left {
                                float: left;
                                width: 1px;
                                height: 15px;
                                border-left: 1px dashed #cdcdcd;
                                margin: 15px 0 0 -15px;
                                &.cur {
                                    height: 22px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .learn-icon, .popularity-icon, .interactive-icon, .share-icon, .point-icon {
        width: 16px;
        height: 16px;
        display: block;
        background: url(./images/icon-07.png) no-repeat 0 -7px;
        background-size: 16px;
        margin: 12px auto 0;
    }
    .popularity-icon {
        background-position: 0 -39px;
    }
    .interactive-icon {
        background-position: 0 -71px;
    }
    .share-icon {
        background-position: 0 -104px;
    }
    .point-icon {
        height: 17px;
        background-position: 0 -138px;
        margin-top: 11px;
    }
</style>
